<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.carousel{
			width: 672px;
			height: 350px;
			margin: 50px auto;
			position: relative;
			overflow: hidden;
		}
		.carousel ul{
			list-style: none;
		}
		.carousel ul li{
			display: none;
		}
		.carousel ul li.current{
			display: block;
		}
		.carousel span{
			position: absolute;	
			width: 55px;
			height: 55px;
			top: 130px;
			cursor: pointer;
		}
		.carousel .leftBtn{
			left: 10px;
			background: url(images/sohu/slide-btnL.png);
		}
		.carousel .rightBtn{
			right: 10px;
			background: url(images/sohu/slide-btnR.png);
		}
		.carousel .circles{
			position: absolute;
			bottom: 0px;
			width: 200px;
			height: 17px;
			left: 50%;
			margin-left: -50px;
		}
		.carousel .circles ol{
			list-style: none;
		}
		.carousel .circles ol li{
			float: left;
			width: 17px;
			height: 17px;
			margin-right: 13px;
			background: gold;
			border-radius: 50%;
			cursor: pointer;
			/*background: url(images/sohu/ico.png) no-repeat -138px -133px;*/
		}
		.carousel .circles ol li.current{
			/*background-position: -125px -133px;*/
			background: purple;
		}
		.carousel .blackmask{
			position: absolute;
			bottom: 30px;
			width: 100%;
			height: 60px;
			background-color: black;
			opacity: 0.6;
			filter:alpha(opacity=60);
		}
		.carousel h3{
			position: absolute;
			bottom: 30px;
			height: 60px;
			line-height: 60px;
			padding-left: 10px;
			color:white;
			font-size:18px;
		}
	</style>
</head>
<body>
	<div class="carousel">
		<div class="imagesList" id="imagesList">
			<ul>
				<li class="current">
					<a href="">
						<img src="images/sohu/aaa.jpg" alt="" />
					</a>
					
					<div class="blackmask"></div>
					<h3>一周美图|谁的眼色撩人？高圆圆媚，汤唯暖，宋仲基帅炸</h3>
				</li>
				<li>
					<a href="">
						<img src="images/sohu/bbb.jpg" alt="" />
					</a>

					<div class="blackmask"></div>
					<h3>男星中规中矩，女星小心机尽显！华</h3>
				</li>
				<li>
					<a href="">
						<img src="images/sohu/ccc.jpg" alt="" />
					</a>

					<div class="blackmask"></div>
					<h3>8岁的小公主美美哒田亮为女儿范冰冰庆生晒礼物美照</h3>
				</li>
				<li>
					<a href="">
						<img src="images/sohu/ddd.jpg" alt="" />
					</a>

					<div class="blackmask"></div>
					<h3>有爱心的女人最美！黄奕捐赠获澳夫人见证…</h3>
				</li>
				<li>
					<a href="">
						<img src="images/sohu/eee.jpg" alt="" />
					</a>

					<div class="blackmask"></div>
					<h3>活泼搞怪不像妈！黄奕女儿森碟走秀呆萌可爱</h3>
				</li>
			</ul>
		</div>
		<div class="btns">
			<span class="leftBtn" id="carousel_leftBtn"></span>
			<span class="rightBtn" id="carousel_rightBtn"></span>
		</div>
		<div class="circles" id="circles">
			<ol>
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>


	<script type="text/javascript">

		//得到所有元素，得到左按钮、右按钮、每个小圆点、每个图片所在的li
		var carousel_leftBtn = document.getElementById("carousel_leftBtn");
		var carousel_rightBtn = document.getElementById("carousel_rightBtn");
		var circlesLis = document.getElementById("circles").getElementsByTagName("li");
		var imagesListLis = document.getElementById("imagesList").getElementsByTagName("li");
		var boxID = document.getElementById("imagesList");
		//信号量
		var img_idx = 0;  //合理值0、1、2、3、4
		var timer;
		//右按钮监听
		carousel_rightBtn.onclick = function(){
			clearInterval(timer);
			//改变信号量
			img_idx++;
			if(img_idx > 4){
				img_idx = 0;
			}
			//调用函数
			changePic();
		}

		//左按钮监听
		carousel_leftBtn.onclick = function(){
			clearInterval(timer);
			//改变信号量
			img_idx--;
			if(img_idx < 0){
				img_idx = 4;
			}
			//调用函数
			changePic();
		}

		//小圆点的监听，要批量添加
		for (var i = 0; i < circlesLis.length; i++) {
			(function(i){
				//监听
				circlesLis[i].onmouseover = function(){
					clearInterval(timer);
					//改变信号量
					img_idx = i;
					//调用函数
					changePic();	//这个函数帮你换图、帮你换小圆点谁是红的谁是灰色的
				}
			})(i);
		};

		boxID.onmouseover = function(){		
			clearInterval(timer);
		}
		boxID.onmouseout = function(){
			move();
		}

		function move(){
			clearInterval(timer);
			timer = setInterval(function(){
				img_idx++;
				if(img_idx > 4){
					img_idx = 0;
				}
				changePic();
			},1000);
		}
		//具体业务的函数，根据当前信号量的值，来切换图片
		function changePic(){
			//去掉所有图片li的current类名
			for (var i = 0; i < imagesListLis.length; i++) {
				imagesListLis[i].className = "";
			};
			//把当前信号量的图片li加上current类
			imagesListLis[img_idx].className = "current";

			//去掉所有小圆点li的current类名
			for (var i = 0; i < circlesLis.length; i++) {
				circlesLis[i].className = "";
			};
			//把当前信号量的小圆点li加上current类
			circlesLis[img_idx].className = "current";
		}

	</script>
</body>
</html>